<template>
  <div class="main_list">
    <div>
      <Rated />
      <Movies
        @finishRender="rollY"
        :pullUp="pullUpNum"
        @dataUpdate="haveUpdate"
      />
      <p v-if="flag" class="low_level">
        亲，已经到最底部，想要了解更多点击进入影院页面!
      </p>
    </div>
  </div>
</template>

<script>
import Movies from "./Movies.vue";
import Rated from "./Rated.vue";

import BetterScroll from "better-scroll";

let bs;

export default {
  data() {
    return {
      pullUpNum: 0,
      flag: false,
    };
  },
  components: {
    Movies,
    Rated,
  },

  mounted() {},

  methods: {
    rollY() {
      bs = new BetterScroll(".main_list", {
        scrollY: true,
        scrollX: false,
        click: true,
        // 支持上拉加载功能了
        pullUpLoad: {
          // 触发上拉事件的阈值，即距离底部还有多少距离就触发事件，以免出现多次上拉才出现数据的现象
          threshold: 50,
        },
      });
      bs.on("pullingUp", () => {
        this.pullUpNum++;
      });
    },
    haveUpdate(flag) {
      this.flag = flag;

      // 重新计算子元素的高度
      bs.refresh();

      if (!flag) {
        // 如果这一次请求完成了，就可以进行下一次上拉加载请求
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/commons.less";
.main_list {
  position: fixed;
  top: 155px;
  left: 0;
  right: 0;
  bottom: 48px;
  overflow: hidden;
  .low_level {
    text-align: center;
    font-size: @fontSize_14;
    color: @theme-color;
  }
}
</style>
